<template>
	<div class="box">
		<div class="answer-tracker">
			<span class="text">共{{ length }}题</span>
			<el-row :gutter="0">
				<el-col
					v-for="(answered, index) in question"
					:key="index"
					:span="6"
					justify="space-evenly"
				>
					<el-card
						:class="{ answered }"
						class="answer-card"
						:style="{ backgroundColor: colors[index] }"
					>
						<div class="card-content">{{ index + 1 }}</div>
					</el-card>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script setup lang="ts">
import { Ref, onMounted, reactive, ref } from 'vue'
import $bus from '@/bus/index'
import { getAllQuestions, Question } from '@/api/test/wirttenTest.ts'
const colors = reactive<string[]>([])
const question: Ref<Question[]> = ref([])
const length =ref(0)
onMounted(() => {
	$bus.on('updateColors', ({ index, value }) => {
		colors[index] = value === 1 ? '#475669' : 'red'
	})
})
const getQuestions = async (pageNum: number, pageSize: number) => {
	const res = await getAllQuestions(pageNum, pageSize)
	question.value = res
	length.value=question.value.length
}
getQuestions(1, 50)
</script>

<style scoped>
.box {
	padding: 0;
	margin: 0;
}
.answer-tracker {
	width: 75%;
	margin-left: 20px;
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.card-content {
	font-size: 20px;
	font-weight: 700;
	margin: auto;
	padding: auto;
	height: 45px;
}
.el-card {
	width: 50px; /* 使卡片宽度填充整个列 */
	height: 40px; /* 使卡片高度填充整个列 */
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 4px;
	border-radius: 5px;
}
.answer-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.answer-card .card-content {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
}
.text {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 10px;
}
</style>
